<template>
	<view class="donation-body" >
		
		
		<view v-if="list.length>0">
			<view class="donation-item" v-for="(item,index) in list">
				
					<uni-card :title="item.name" padding="10px 0"  >
				
				
					<view @click="navTo('/pages/donation/detail?id='+item.id+'&title='+item.name)">
					
						<image style="width: 100%;" :src="apiurl+item.img"></image>
						<view style="margin-top: 10px;">
							<text class="uni-body uni-mt-5" >{{item.description}}</text>
						</view>
						<view style="margin-top: 10px;">
							<!-- <text class="uni-body uni-mt-5" >已有<text style="color: red;">{{item.donationCnt}}</text>人登记</text> -->
							<text class="uni-body uni-mt-5" >已有<text style="color: red;">{{item.donationCnt}}</text>人登记</text> 
						</view>
						
					</view>
					
					<view slot="actions" class="card-actions">
						<view class="card-actions-item" @click="navTo('/pages/donation/record?id='+item.id+'&title='+item.name)">
							<uni-icons custom-prefix="iconfont" type="icon-xueshengbaoming" size="16"></uni-icons>
							
							<text class="card-actions-item-text">登记记录</text>
						</view>
						<view class="card-actions-item" @click="navTo('/pages/donation/detail?id='+item.id+'&title='+item.name)">
							<uni-icons type="heart" size="18" color="#999"></uni-icons>
							<text class="card-actions-item-text">我要登记</text>
						</view>
					</view>
				</uni-card>
			</view>
			<view v-if="isBottom" class="align-center margin-bottom-15">
				<text>没有更多数据了！</text>
			</view>
		</view>
		<view v-else class="align-center">
			<text>暂无数据！</text>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apiurl:'',
				categoryId:'',
				list:[],
				share:{},
				pagination:{},
				pH:0,
				navHeight:0,
				isBottom:false,
				stitle:'',
				detail:null,
			}
		},
		methods: {
			//   分页
			handleScrollToLower () {
				console.log("scroll to bottom!")
				this.getList()
			},
			getList(){
				var params = {
					'categoryId':this.categoryId
				}
				//首次加载pagination没有值
				if(this.pagination.current && this.pagination.size && this.pagination.total){
					params.pageNo = this.pagination.current;//开始页码
					params.pageSize = this.pagination.size//页数
					if(params.pageNo*params.pageSize < this.pagination.total){
						params.pageNo = params.pageNo+1
						this.getData(params)
					}else{
						this.isBottom = true;
					}
				}else{
					this.getData(params)
				}
				
			},
			getData(params){
				this.$http.get('/temple.donation/templeDonation/api/list', params
				).then((res) => {
					this.pagination.current = res.data.result.current
					this.pagination.size = res.data.result.size
					this.pagination.total = res.data.result.total
					if(this.pagination.current > 1){
						this.list = [...this.list,...res.data.result.records]
					}else{
						this.list = res.data.result.records;
						
					}
				})
			}
			
		},
		onReady() {
			let that=this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that._data.pH=res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					let titleH=uni.createSelectorQuery().select(".sv"); //想要获取高度的元素名（class/id）
					titleH.boundingClientRect(data=>{
						let pH=that._data.pH; 
						that._data.navHeight=pH-data.top  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
					}).exec()
				}
			})
		},
		onLoad:function(option) {
			uni.setNavigationBarTitle({
			    title:option.name
			})
			this.id=option.id
			this.apiurl = getApp().globalData.staticUrl
			this.orgCode = getApp().globalData.orgCode;
			this.categoryId = option.categoryId
			this.$http.get('/temple.donation/templeDonation/api/queryById?id='+this.id,{}).
			then((res)=>{
				this.detail=res.data.result.records
				
			})
			// console.log(option)
			// this.$http.get('/temple.donation/templeDonation/api/list', {
			// 	'categoryId':this.categoryId
			// }).then((res) => {
			// 	this.list = res.data.result.records;
			// })
			this.getList()
		}
	}
</script>

<style>
.card-actions{
	    display: flex;
	    flex-direction: row;
	    justify-content: space-around;
	    align-items: center;
	    height: 45px;
	    border-top: 1px #eee solid;
}
</style>
